<template>
  <div class="">
    <Form ref="form" :label-width="labelWidth" :model="formData" :rules="ruleValidate">
      <FormItem prop="name">
        <label><span class="color-red">*</span> 过滤器名称</label>
        <Input v-model="formData.name"/>
      </FormItem>
      <FormItem prop="filter_code">
        <Alert type="info" show-icon style="padding-right: 15px;">
          <p class="m-b-5px">过滤器中使用变量【ds_resultObj】存储原始响应结果集数据。</p>
          <!--<div>
            2、您可以创建一个新的对象来构建组件需要结果集数据结构，然后重新赋值给【data】变量即可。示例：<br/>
            <p style="background-color: #f8f8f9; border: 1px solid #e8eaec; border-radius: 4px; padding: 10px;">
              let newData = [{<br/>
              &nbsp;&nbsp;"value": data[0].value + '这是一个新增的字符串'<br/>
              }]<br/>
              data = newData
            </p>
          </div>-->
          <!--<p>3、过滤器中可以使用所有全局变量，如【this.$】【this.$EventBus】等...</p>-->
        </Alert>
        <CodeEditor v-model="formData.filter_code"></CodeEditor>
      </FormItem>
      <Button type="primary" size="small" @click="submitForm" :loading="loading">保存</Button>
    </Form>

  </div>
</template>

<script>
  export default {
    name: 'FilterForm',
    props: {
      filterId: {
        type: String
      },
      labelWidth: {
        type: Number,
        default: 105
      }
    },
    data() {
      return {
        loading: false,
        formData: {
          id: '',
          name: '',
          filter_code: ''
        },
        ruleValidate: {
          name: [
            { required: true, message: '过滤器名称不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    mounted() {
      this.loadFilter();
    },
    methods: {
      loadFilter () {
        if (this.filterId) {
          this.$PnApi.FilterApi.getFilterById(this.filterId).then(result=>{
            this.formData = result.data.payload;
          })
        }
      },

      submitForm () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.loading = true
            this.$PnApi.FilterApi.saveFilter(this.formData).then(result=>{
              if (result.data.success) {
                this.$Message.success(result.data.message);
                this.$emit('saveSuccess');
                this.$EventBus.$emit('pn_filterChange');
                this.loadFilter()
              }else {
                this.$Message.error(result.data.message)
              }
              this.loading = false
            })
          }
        });
      }
    },
    computed: {}
  }
</script>

<style scoped>
  >>> .ivu-form-item-content {
    margin-left: 0px !important;
    line-height: initial !important;
  }
</style>
